<template>
  <div class="Team">
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分start
        -->
    <!--<mt-header fixed title="团队管理">-->
      <!--<router-link to="/" slot="left">-->
        <!--<mt-button icon="back">返回</mt-button>-->
      <!--</router-link>-->
      <!--<mt-button icon="more" slot="right"></mt-button>-->
    <!--</mt-header>-->
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分end
        -->

    <div class="team_audit">
      <div class="team_audit_box">
        <div class="team_imgbox">
          <img src="../assets/images/toux.png"/>
        </div>
        <div class="team_p">
          <p class="p1">团队成员审核</p>
          <router-link to="/newMembers" class="p2" @click="" replace>添加新成员</router-link>
        </div>
        <div class="team_icon">
          <img src="../assets/images/icon_right.png"/>
        </div>
      </div>
    </div>
    <div class="team_list  left" id="teamlist">
      <div class="t_list" v-bind:class="{ red:index==current}" @click="checked(index)" v-for="(team,index) in list">
        <div class="list_img">
          <!--<img :src="t_list.src"/>-->
          <img :src="team.headImg">
        </div>
        <div class="list_c">
          <input class="lp_name" v-model="team.nickName"  v-bind:readonly=team.readOnly ></input>
          <p class="lp_num">{{team.mobile}}</p>
        </div>
        <div class="team_money">
          <!--<button class="t_btn"  @click="edit(index)">修改备注</button>-->
          <mt-button class="editbz" type="default" size="small" @click="edit(index)">修改备注</mt-button>
          <p class="t_money">佣金：{{team.commission}}</p>
          <!-- <p class="t_commission">{{}}</p>-->
        </div>
      </div>
    </div>
    <div class="mask" v-if="msk">
      <div class="zhezhao">
          <p class="beizhu">修改备注</p>
          <p class="quedx">确定修改吗？</p>

        <div class="xgbez">
          <input class="username" v-model="val"   ref="input1"/>
        </div>
        <div class="quer">
           <div id="qx"  @click="close()">取消</div>
           <div id="qr" @click="ok()">确认</div>
        </div>
      </div>

    </div>
    <loading v-show="showLoading "></loading>
<!--    <div class="team_footer">
      <div class="team_fleft" @click="save()">
        保存
      </div>
      <div class="team_fright"@click="">
        一键邀请好友
      </div>
    </div>-->

  </div>
</template>

<script>
  /* eslint-disable indent,no-tabs,no-mixed-spaces-and-tabs,no-trailing-spaces,quotes,space-before-function-paren,semi,key-spacing,comma-spacing,padded-blocks,spaced-comment,keyword-spacing,space-infix-ops,eqeqeq,space-before-blocks,block-spacing,space-in-parens,no-unused-vars,no-undef */
  import Vue from 'vue'
  import Mint from 'mint-ui'
  import { MessageBox } from 'mint-ui'
  import 'mint-ui/lib/style.css'
  import axios from "axios"
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import index from "../router";
  // eslint-disable-next-line indent,semi
  Vue.prototype.$http = axios;
  Vue.use(Mint)
  export default {
// eslint-disable-next-line key-spacing
    name: 'Team',
    data() {
      return {
        list: [],
        activeIndex:0,
        current:0,
        msk:false,
        val:"",
        a:'',
        showLoading: true, //显示加载动画
      }
    },
    methods: {
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      checked: function (index){
        this.activeIndex=index
        this.current=index;
      },
      save:function (index){
        this.list.readOnly=true
      },
      close:function () {
        this.msk=false
      },
      ok:function () {
      this.list[this.activeIndex].nickName=this.$refs.input1.value
        this.msk=false
        console.log(this.activeIndex)
        const jsonValue = JSON.stringify({
          "c": "10049",
          "p": {
// eslint-disable-next-line spaced-comment
            "userId": JSON.parse(window.localStorage.data).id/*this.list[this.activeIndex].id*/, //用户ID
            "teamUserId":this.list[this.activeIndex].id,
            "tokenId":token(),
            "teamName":this.$refs.input1.value
          }
        });
        this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
          this.hideLoading();
          console.log( res.data);
        })
      },
// eslint-disable-next-line no-mixed-spaces-and-tabs
      edit: function (activeIndex) {
        this.val=this.list[activeIndex].nickName
        this.msk=true
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
      if (varRet == -1) {
        varThis.alertTip('网络错误');
        varThis.go = function () {
          varThis.showAlert = false;
        }

      }
      // 关注钱应该判断下是否已经关注过了
      msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
        varThis.wxlist=res.data.p.sign
        wx_config(varThis.wxlist);
        wx_hideAllMenu();
        wx.hideMenuItems({
          //禁用单独分享朋友圈QQ空间等功能
          menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
        });
      })


    },this.type)
    },

    beforeCreate:function() {
      {
        const jsonValue = JSON.stringify({
          "c": "10021",
          "p": {
// eslint-disable-next-line spaced-comment
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "tokenId":token(),
            "orderId":"YHDR123456"
          }
        });
        this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
          this.hideLoading();
// eslint-disable-next-line semi
          this.list = res.data.p.teamNumberList;
          console.log(this.list);
          if(this.list[this.activeIndex].teamName){
            this.list[this.activeIndex].nickName=this.list[this.activeIndex].teamName
          }
          else {
            this.list = res.data.p.teamNumberList
          }
        })
      }
    }

  }
</script>

<style scoped>
  /*遮罩层*/
  .mask{
    width: 78%;
    min-height: 300px;
    background:#f4f4f4;
    z-index: 199;
    position: fixed;
    top: 300px;
    left: 69px;
  }


  .editbz{
    margin-top: 20px;
  }
  .mint-button-text{
    margin-top: 10px!important;
  }
  .mint-button::after{
    margin-top: 20px!important;
  }
  .ok{
    width: 100px;
    margin-top: 50px;
  }
  .red .lp_name{
    border: #f4f4f4;
  }
  .mint-header {
    width: 100%;
    background: #1c1b20;
  }
  .zhezhao{
    width: 100%;
    min-height: 300px;
    float: left;
    text-align: center;
  }
  .beizhu{
    color: #000000;
    font-size: 30px;
    margin-top: 30px;
  }
  .quedx{
    color: #666;
    font-size: 24px;
    margin-top: 30px;
  }
  .xgbez{
    margin-top: 30px;
  }
  .xgbez input{
    width: 68%;
    height: 40px;
    border: 1px solid #ffffff ;
    padding-left: 10px;
  }
  #qx{
    width: 48%;
    height: 70px;
    float: left;
    border-top: 1px solid #ffffff;
    border-right:1px solid #ffffff ;
    line-height: 70px;
  }
  #qr{
    width:50%;
    height: 70px;
    float: left;
    border-top: 1px solid #ffffff;
    line-height: 70px;
  }

  .Team_btn {
    text-align: center;
  }
  .close img{
    width: 32px;
    height: 32px;
    margin-top: 20px;

  }
  .quer{
    text-align: center;
    width: 100%;
    min-height: 70px;
    margin-top: 30px;
    float: left;
  }
  .mint-cell-text {
    margin-left: 30px;
  }
  .mint-cell-label {
    margin-left: 53px;
  }
  .team_audit {
    width: 100%;
    height: 191px;
    background: #f4f4f4;
    padding-top: 36px;
    margin-top: 40px;
  }

  .team_audit_box {
    width: 100%;
    height: 135px;
    background: #FFFFFF;
  }

  .team_imgbox {
    width: 112px;
    height: 112px;
    margin-left: 38px;
    padding-top: 28px;
    float: left;
  }

  .team_imgbox img {
    width: 80px;
    height: 80px;
  }

  .team_p {
    width: 150px;
    height: 135px;
    float: left;
    padding-top: 34px;
  }
  .p1 {
    color: #3b3b43;
    font-size: 24px;
  }

  .p2 {
    color: #a1a1a1;
    font-size: 24px;
    margin-top: 20px;
  }

  .team_icon {
    width: 15px;
    height: 135px;
    float: right;
    margin-top: 56px;
    margin-right: 30px;
  }

  .team_icon img {
    width: 12px;
    height: 22px;
  }

  .team_list {
    width: 100%;
    min-height: 750px;
  }

  .t_list {
    width: 100%;
    height: 131px;
    float: left;
    border-bottom: 1px solid #F4F4F4;
  }

  .list_img {
    width: 18%;
    height: 131px;
    float: left;
    padding-top: 9px;
  }

  .list_img img {
    width: 112px;
    height: 112px;
    margin-left: 24px;
  }

  .list_c {
    width: 25%;
    height: 131px;
    float: left;
    margin-left: 40px;
    padding-top: 28px;
  }

  .lp_name {
    font-size: 24px;
    color: #3b3b43;
    border: none;
    background: #ffffff;
  }

  .lp_num {
    font-size: 24px;
    color: #afafaf;
    margin-top: 23px;
  }

  .icon_img {
    width: 15px;
    height: 131px;
    float: right;
    line-height: 131px;
    margin-right: 30px;
  }

  .icon_img img {
    width: 12px;
    height: 22px;
  }

  .team_money {
    width: 34%;
    height: 131px;
    float: right;
  }
  .t_btn{
    margin-top: 25px;
    font-size: 24px;
    background: #fe3519;
    border: none;
    padding: 5px;
    color: #ffffff;
    border-radius:10px;
  }
  .t_money {
    font-size: 24px;
    color: #fe3519;
    margin-right: 30px;
    margin-top: 15px;
  }

  .t_commission {
    color: #cacaca;
    font-size: 20px;
    margin-top: 14px;
  }

  .team_footer {
    width: 100%;
    height: 80px;
    border-top: 1px solid #F4F4F4;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .team_fleft {
    width: 49%;
    height: 80px;
    text-align: center;
    color: #333;
    font-size: 26px;
    line-height: 80px;
    float: left;
    border-right: 1px solid #F4F4F4;
  }

  .team_fright {
    width: 50%;
    height: 80px;
    text-align: center;
    color: #fe3519;
    font-size: 26px;
    line-height: 80px;
    float: left;
  }
</style>
